<template>
  <div class="star-content" :class="`size-${size}`">
 <!--    <h2>分数:{{ score }}分</h2> -->
    <span
      v-for="(star, index) in starItems"
      :key="index"
      :class="[`stars-${size}`, `star-${star}`]"
    >
    </span>
  </div>
</template>

<script>
const starCount = 5;
export default {
  name: "star",
  props: {
    // 对星星做默认处理，若没有说明星星大小和评分，则默认
    score: {
      type: Number,
      default: 0,
    },
    size: {
      type: Number,
      default: 48,
    },
  },
  computed: {
    starItems() {
      let num = Math.floor(this.score * 2) / 2;
      let result = [];
      for (var i = 0; i < starCount; i++) {
        if (i < Math.floor(num)) {
          result.push("on");
        } else if (i === Math.floor(num) && i < num) {
          result.push("half");
        } else {
          result.push("off");
        }
      }
      // 返回处理好的数据
      return result;
    },
  },
};
</script>

<style lang="scss" scoped>
  .star-content{
    &.size-48{
      height: 24px;
    }
    &.size-36{
      height: 18px;
    }
    &.size-30{
      height: 15px;
    }
    &.size-24{
      height: 12px;
    }
    &.size-20{
      height: 10px;
    }
  }
  @include stars(48, 24);
  @include stars(36, 6);
  @include stars(30, 6);
  @include stars(20, 2);

  @media screen and (max-width: 360px){
    @include stars(30, 3)
  }
</style>